@use '../../../theme/variables' as *;

@each $track in $tracks {
  .session-track-#{$track} {
    color: var(--ion-color-#{$track});
  }
}

/* Favorite Icon
 * --------------------------------------------------------
 */

.show-favorite {
  position: relative;
}

.icon-heart-empty,
.icon-heart {
  --border-radius: 50%;
  --padding-start: 0;
  --padding-end: 0;

  position: absolute;

  top: 5px;
  right: 5px;

  width: 48px;
  height: 48px;

  transition: transform 300ms ease;

  font-size: 16px;
}

.icon-heart-empty {
  transform: scale(1);
}

.icon-heart {
  transform: scale(0);
}

.show-favorite .icon-heart {
  transform: scale(1);
}

.show-favorite .icon-heart-empty {
  transform: scale(0);
}

h1 {
  margin: 0;
}
